<template>
	<div>
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<!-- 加载提示 -->
			<template #loading>
				刷新中..........
			</template>
			<van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<van-cell v-for="item in list" :key="item" :title="item" />
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script>
	import '/src/assets/style/pullrefresh/index.less';
	import '/src/assets/style/list/index.less';
	import '/src/assets/style/cell/index.less';
	import { Toast } from 'vant';
	export default {
		data() {
			return {
				list: [],
				count: 0,
				isLoading: false,
				finished: false,
				refreshing: false,
			};
		},
		methods: {
			onLoad() {
				setTimeout(() => {
					if (this.refreshing) {
						this.list = [];
						this.refreshing = false;
					}

					for (let i = 0; i < 20; i++) {
						this.list.push(this.list.length + 1);
					}
					this.isLoading = false;

					if (this.list.length >= 300) {
						this.finished = true;
					}
				}, 1000);
			},
			onRefresh() {
				// // 清空列表数据
				this.finished = false;
				this.refreshing = true;
				// // 重新加载数据
				// // 将 loading 设置为 true，表示处于加载状态
				// this.loading = true;
				this.onLoad();
			},
		},
	};
</script>

<style>
	.van-loading__spinner {
		display: none;
	}
</style>
